<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="test">
        我是文本内容
        <p>adfadsf </p>
        <p>adfadsf </p>
        <p>adfadsf </p>
        <!-- 我是注释的信息 -->
    </div>
    <script>
        var divele = document.getElementsByTagName('div')[0];
        // console.log(divele.childNodes);

        // 每个节点都是一个对象  
        // 节点分类:
            // 元素节点 
            // 文本节点 
            // 属性节点
            // 注释节点  
        // 每个对象都有三个属性 
        // nodeType   节点类型
            // 元素节点 1
            // 属性节点 2
            // 文本节点 3
            // 注释节点 8

        // var divele = document.getElementsByTagName('div')[0];
        // alert(divele.firstChild.nodeType); // 3
        // alert(divele.firstElementChild.nodeType); // 1 
        // alert(divele.attributes[0].nodeType) // 2
        // // div的倒数第二个元素是 注释节点 
        // alert(divele.childNodes[divele.childNodes.length-2].nodeType)//8
        // nodeName  节点名称 
            // 元素节点  元素的名字
            // 属性节点  属性的名字
            // 文本节点  #text
            // 注释节点  #comment
        // var divele = document.getElementsByTagName('div')[0];
        // alert(divele.firstChild.nodeName); // #text
        // alert(divele.firstElementChild.nodeName); // P  元素名大写
        // alert(divele.attributes[0].nodeName) // class
        // // div的倒数第二个元素是 注释节点 
        // alert(divele.childNodes[divele.childNodes.length-2].nodeName)//#comment
        // nodeValue
            // 元素节点  仅仅是元素的名字  没有值  所以是 null
            // 属性节点  属性的值
            // 文本节点  文本的内容
            // 注释节点  注释的信息
        var divele = document.getElementsByTagName('div')[0];
        alert(divele.firstChild.nodeValue); // 
        alert(divele.firstElementChild.nodeValue); // P  元素名大写
        alert(divele.attributes[0].nodeValue) // class
        // div的倒数第二个元素是 注释节点 
        alert(divele.childNodes[divele.childNodes.length-2].nodeValue)//#comment
        
    
    </script>
</body>
</html>